import React from 'react';

interface MessageProps {
    type: 'user' | 'ai';
    content: string;
}
const Message: React.FC<MessageProps> = ({ type, content }) => {
    const messageStyle = {
        borderRadius: '10px', // 圆角
        padding: '10px 20px', // 内边距，让消息看起来更舒适
        maxWidth: '75%', // 最大宽度，避免过长的消息影响布局
        margin: '5px 0', // 外边距，为消息之间提供间隔
        backgroundColor: type === 'user' ? '#DCF8C6' : '#E0E0E0', // 用户消息和AI消息不同背景色
        color: type === 'user' ? '#333' : '#666', // 文字颜色区分
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', // 添加阴影效果，提升美观度
        fontSize: '14px', // 字体大小
        wordBreak: 'break-word', // 自动换行
    };

    return (
        <div style={messageStyle}>
            <p>{content}</p>
        </div>
    );
};

export default Message;